<template>
    <div style="height: 100%">
        <el-container style="height: 500px; border: 1px solid #eee;height: 100%">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x: hidden">
                    <div style="height: 60px;line-height: 60px;text-align: center;">
                        <img src="../assets/logo.png"
                             style="height: 30px;width: 30px;text-align: center;padding-top: 15px">
                        <b style="color: #6a7076;">后台管理系统</b>
                    </div>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-message"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>导航二</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="2-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="2-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>导航三</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="3-1">选项1</el-menu-item>
                            <el-menu-item index="3-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="3-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="3-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container style="height: 100%">
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人资料</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                            <!--              <el-dropdown-item>删除</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>王小虎</span>
                </el-header>

                <!--                新增用户弹窗-->
                <el-dialog title="新增用户:" :visible.sync="addDialogFormVisible" width="40%">
                    <el-form :model="addForm">
                        <el-form-item label="账户:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.username" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.password" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.nickname" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.email" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.phone" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.address" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addUser">新增</el-button>
                    </div>
                </el-dialog>
                <!--                更新用户弹窗-->
                <el-dialog title="更新用户:" :visible.sync="editDialogFormVisible" width="40%">
                    <el-form :model="addForm">
                        <el-form-item label="账户:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.username" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.password" auto-complete="off" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="昵称:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.nickname" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.email" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.phone" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址:" :label-width="formLabelWidth">
                            <el-input v-model="addForm.address" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="editDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editUser">更 新</el-button>
                    </div>
                </el-dialog>

                <el-main>
                    <div style="margin-bottom: 10px">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                            <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div style="padding: 10px 0;">
                        <el-input placeholder="请输入姓名" suffix-icon="el-icon-search" style=" width:200px"
                                  size="small" v-model="searchInput">
                        </el-input>
                        <el-button type="primary" size="small" style="margin-left: 5px;" @click="searchByUsername">搜索
                        </el-button>
                    </div>
                    <div>
                        <el-button icon="el-icon-plus" type="primary" size="small" @click="showAdd">新增</el-button>
                        <el-button icon="el-icon-delete" type="danger" size="small" @click="batchDelete">批量删除</el-button>
                        <el-button icon="el-icon-upload2" type="primary" size="small">导入</el-button>
                        <el-button icon="el-icon-download
" type="danger" size="small">导出
                        </el-button>
                    </div>
                    <el-table :data="users" ref="multipleTable" @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55"
                                label="全选"
                                align="center">
                        </el-table-column>
                        <el-table-column prop="username" label="账号" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="nickname" label="昵称" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" align="center">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" align="center">
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <el-button type="success" size="small" @click="showEdit(scope.row)">编辑 <i
                                        class="el-icon-edit"></i></el-button>
                                <el-popconfirm
                                        confirm-button-text='确认'
                                        cancel-button-text='我再想想'
                                        icon="el-icon-info"
                                        icon-color="red"
                                        title="确定删除此用户吗？"
                                        ref="reference"
                                        @confirm="delUser(scope.row.id)"
                                        @cancel=""
                                >
                                    <el-button type="danger" size="small" style="margin-left: 5px" slot="reference">删除
                                        <i class="el-icon-delete"></i></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-form :inline="true" style="padding-top: 10px">
                        <el-form-item>
                            <el-pagination
                                    @size-change='handleSizeChange'
                                    @current-change='handleCurrentChange'
                                    :current-page="currentPage"
                                    :page-sizes="[2,5,10,20]"
                                    :page-size="currentSize"
                                    :total="total"
                                    layout="total,sizes,prev,pager,next,jumper"
                            ></el-pagination>
                        </el-form-item>
                        <el-form-item style="margin-left: 30px">
                            <el-switch
                                    v-model="desc"
                                    active-color="#13ce66"
                                    inactive-color="#eee"
                                    :active-value="true"
                                    :inactive-value="false"
                                    inactive-text="顺序展示"
                                    active-text="展示最新"
                                    @change="descShow">
                            </el-switch>
                        </el-form-item>
                    </el-form>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>
<script>

    export default {
        name: 'HomeView',
        components: {},
        data() {
            return {
                desc: true,
                users: [],
                total: 0,
                currentPage: 1,
                currentSize: 5,
                searchInput: '',
                formLabelWidth: '120px',
                addDialogFormVisible: false, //新增用户弹窗默认不展示
                editDialogFormVisible: false,//更新用户弹窗
                delVisible: false,//控制删除弹出提示
                multipleTable:[],//控制多选
                addForm: {
                    username: '',
                    nickname: '',
                    password: '',
                    email: '',
                    phone: '',
                    address: '',
                }
            }
        },
        created() {
            this.findAll()
        },
        methods: {
            findAll() {
                this.$http.get("http://localhost:8081/user/page", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.currentSize,
                        descVal: this.desc
                    }
                })
                    .then(res => {
                        this.users = res.data.records
                        this.total = res.data.total
                    })
                /*fetch("http://localhost:8081/user/page?pageNum="+this.currentPage+"&pageSize="+this.currentSize)
                .then(res => res.json())
                .then(res => {
                    //mybatis返回的map键是users
                    // this.users=res.users
                    //mybatisplus page()返回的数据是records
                    this.users=res.records
                    this.total=res.total
                });*/
            },
            handleSizeChange(currentSize) {
                console.log(`每页 ${currentSize} 条`);
                // this.currentPage=1
                this.currentSize = currentSize
                this.findAll()
            },
            handleCurrentChange(currentPage) {
                console.log(`当前页: ${currentPage}`);
                this.currentPage = currentPage
                this.findAll()
            },
            searchByUsername() {
                /*                fetch("http://localhost:8081/user/findbyusername?username="+this.searchInput)
                                .then(res=>res.json())
                                .then(res=>{
                                    this.users=res.users
                                })*/
                this.$http.get("http://localhost:8081/user/findbyusername", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.currentSize,
                        username: this.searchInput
                    }
                }).then(res => {
                    this.users = res.data.records
                    this.total = res.data.total
                })
            },
            //打开新建弹窗
            showAdd() {
                this.addDialogFormVisible = true
                this.addForm = {}
            },
            //新增用户
            addUser() {
                this.$http.post("http://localhost:8081/user/add", this.addForm)
                    .then(res => {
                        if (res) {
                            this.$message.success("用户保存成功！")
                        } else {
                            this.$message.error("用户保存失败！")
                        }
                        this.addDialogFormVisible = false
                        this.findAll()
                    })
            },
            //控制是否倒序展示
            descShow() {
                this.findAll()
            },
            //更新用户
            showEdit(row) {
                this.editDialogFormVisible = true
                this.addForm = row
            },
            editUser() {
                this.$http.post("http://localhost:8081/user/update", this.addForm)
                    .then(res => {
                        if (res) {
                            this.$message.success("用户更新成功！")
                        } else {
                            this.$message.error("用户更新失败！")
                        }
                        this.editDialogFormVisible = false
                        this.findAll()
                    })
            },
            //删除用户
            delUser(id) {
                this.$http.delete("http://localhost:8081/user/delete/" + id)
                    .then(res => {
                        if (res) {
                            this.$message.success("删除成功！")
                        } else {
                            this.$message.error("删除失败！")
                        }
                        this.findAll()
                    })
            },
            //多选
            handleSelectionChange(val){
                this.multipleTable = val
            },
            //批量删除
            batchDelete(){
                let ids = this.multipleTable.map(v=>v.id) //multipleTable会接收到一个对象数组 使用map()方法将对象数组中的id提取出来
                this.$http.post("http://localhost:8081/user/delete/batch",ids)
                .then(res => {
                    if(res){
                        this.$message.success("批量删除成功！")
                    }else{
                        this.$message.error("批量删除失败！")
                    }
                })
                this.findAll()
            }
        }
    }
</script>